<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in TotalCountList" :key="index">
        <el-card>
          <div class="card-panel-title">
            <div class="card-panel-title-text">{{ item.title }}</div>
            <div class="card-panel-title-desc">
              <span class="card-date">今日</span>
            </div>
          </div>
          <div class="card-panel-num">{{ item.num }}</div>
          <div class="card-panel-date">
            <span class="date_text">昨日数据</span>
            <span class="date_num">{{ item.yestday }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1.25rem">
      <el-col :span="3" v-for="(item, index) in CardMenyList" :key="index">
        <el-card>
          <div class="card-menu">
            <span>
              <el-icon>
                <component :is="item.icon" :color="item.iconColor" />
              </el-icon>
            </span>
            <span>{{ item.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1.25rem">
      <el-col :span="12">
        <el-card>
          <div class="todo-list">
            <div class="title">待办事项</div>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, index) in TodoList" :key="index">
                <div class="todo-grid">
                  <div
                    class="icon-box"
                    :style="{ background: item.iconbgColor }"
                  >
                    <el-icon>
                      <component :is="item.icon" :color="item.iconColor" />
                    </el-icon>
                  </div>
                  <div class="todo-grid-right">
                    <div class="todo-grid-title">{{ item.title }}</div>
                    <div class="todo-grid-num">{{ item.num }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="saleslist-top">
            <el-row>
              <el-col :span="12">
                <div class="title">供应商销售情况TOP 5</div>
              </el-col>
              <el-col :span="12" style="text-align: right">
                <el-radio-group size="small">
                  <el-radio-button label="近七天" value="New York" />
                  <el-radio-button label="近30天" value="Washington" />
                  <el-radio-button label="本月" value="Los Angeles" />
                  <el-radio-button label="本年" value="Chicago" />
                </el-radio-group>
              </el-col>
            </el-row>

            <el-table :data="tableData" style="width: 100%" size="small">
              <el-table-column prop="order" label="排名" width="60" />
              <el-table-column label="头像" width="100">
                <template #default="scope">
                  <img class="head-img" :src="scope.row.headImg" alt="" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="供应商" />
              <el-table-column
                prop="saleVolume"
                label="销量"
                width="70"
                sortable
              />
              <el-table-column
                prop="saleAmount"
                label="销售额"
                width="100"
                sortable
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1.25rem">
      <el-col :span="12">
        <el-card>
          <div class="chart-box">
            <div ref="chart" class="chart"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-box">
            <div ref="chart1" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref,nextTick } from "vue";
import * as echarts from "echarts";
const chart = ref(null);
const chart1 = ref(null);

const TotalCountList = ref([
  { title: "新增用户", num: 789, yestday: 17 },
  { title: "新增订单", num: 789, yestday: 17 },
  { title: "销售金额", num: 789, yestday: 17 },
  { title: "供应商数", num: 789, yestday: 17 },
]);
const CardMenyList = ref([]);
const TodoList = ref([]);
const tableData = ref([
  {
    order: 1,
    headImg:
      "https://crmebmer.oss-cn-beijing.aliyuncs.com/def/3841020240809101034668.png",
    name: "供应商1",
    saleVolume: 78,
    saleAmount: 78987,
  },
  {
    order: 2,
    headImg:
      "https://crmebmer.oss-cn-beijing.aliyuncs.com/def/dd66f202408291053156183.png",
    name: "供应商2",
    saleVolume: 76,
    saleAmount: 86767,
  },
  {
    order: 3,
    headImg:
      "https://mer.crmeb.net/uploads/def/20240730/a13e4a29e090088a64fb4ac8262df87c.png",
    name: "供应商3",
    saleVolume: 74,
    saleAmount: 7865,
  },
  {
    order: 4,
    headImg:
      "https://crmebmer.oss-cn-beijing.aliyuncs.com/def/513b3202407310929457093.png",
    name: "供应商4",
    saleVolume: 45,
    saleAmount: 343,
  },
  {
    order: 5,
    headImg:
      "https://crmebmer.oss-cn-beijing.aliyuncs.com/def/1f7cb202407311638139489.jpg",
    name: "供应商5",
    saleVolume: 23,
    saleAmount: 111,
  },
]);
onMounted(async () => {
  CardMenyList.value = [
    {
      title: "商品管理",
      icon: "Goods",
      iconColor: "#00bcd4",
      url: "",
    },
    {
      title: "订单管理",
      icon: "Document",
      iconColor: "#5cc7c1",
      url: "",
    },
    {
      title: "供应商管理",
      icon: "UserFilled",
      iconColor: "#b27feb",
      url: "",
    },
    {
      title: "用户管理",
      icon: "User",
      iconColor: "#6394f9",
      url: "",
    },
    {
      title: "文章管理",
      icon: "Tickets",
      iconColor: "#00bcd4",
      url: "",
    },
    {
      title: "系统设置",
      icon: "Setting",
      iconColor: "#346fe6",
      url: "",
    },
    {
      title: "专区管理",
      icon: "Star",
      iconColor: "#ff9f00",
      url: "",
    },
    {
      title: "报表管理",
      icon: "Calendar",
      iconColor: "#00bcd4",
      url: "",
    },
  ];
  TodoList.value = [
    {
      title: "待审核商品",
      icon: "GoodsFilled",
      iconColor: "#3491fa",
      iconbgColor: "#eff7ff",
      num: 789,
      url: "",
    },
    {
      title: "待审核供应商",
      icon: "UserFilled",
      iconColor: "#b27feb",
      iconbgColor: "#f9f5fe",
      num: 789,
      url: "",
    },
    {
      title: "待审核信用额度",
      icon: "Money",
      iconColor: "#ff7d00",
      iconbgColor: "#fff5eb",
      num: 789,
      url: "",
    },
    {
      title: "待发货订单",
      icon: "Collection",
      iconColor: "#ff7d00",
      iconbgColor: "#fff5eb",
      num: 789,
      url: "",
    },

    {
      title: "待采购订单",
      icon: "Document",
      iconColor: "#f7ba1e",
      iconbgColor: "#fffaed",
      num: 789,
      url: "",
    },
    {
      title: "待处理退货",
      icon: "DocumentRemove",
      iconColor: "#3491fa",
      iconbgColor: "#eff7ff",
      num: 789,
      url: "",
    },

    {
      title: "待处理还款",
      icon: "Tickets",
      iconColor: "#0fc6c2",
      iconbgColor: "#ecfbfb",
      num: 789,
      url: "",
    },

    {
      title: "待开发票",
      icon: "Ticket",
      iconColor: "#9fdb1d",
      iconbgColor: "#f8fded",
      num: 789,
      url: "",
    },
  ];
  await nextTick();
  chartData1();
  chartData2();
});
const chartData1 = () => {
  
  const myChart = echarts.init(chart.value);
  const option = {
    title: {
      text: "销售金额折线图",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "30",
      bottom: "30",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售金额",
        type: "line",
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};const chartData2= () => {
  const myChart = echarts.init(chart1.value);
  const option = {
    title: {
      text: "订单数",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "订单总数",
        type: "line",
        data: [120, 200, 150, 80, 70, 110, 130],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style scoped>
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none;
}
.card-panel-title {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.card-panel-title .card-panel-title-text {
  flex: 1;
}
.card-panel-title .card-panel-title-desc {
  flex: 1;
  text-align: right;
}
.card-date {
  border: 1px solid #6394f9;
  border-radius: 3px;
  color: #6394f9;
  background: #f4f7ff;
  text-align: center;
  padding: 2px 5px;
}
.card-panel-num {
  font-size: 30px;
  color: #000;
  font-weight: 700;
}
.card-panel-date {
  color: #696969;
  border-top: 1px solid #eee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-top: 13px;
}

.card-menu span {
  display: block;
  text-align: center;
}
.card-menu .el-icon {
  font-size: 20px;
}
.title {
  color: #000;
  font-size: 16px;
  font-weight: 700;
}
.saleslist-top,
.todo-list {
  height: 270px;
}
.todo-grid {
  display: flex;
  align-items: center;
  margin-top: 1.875rem;
}
.icon-box {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 1.5625rem;
}
.todo-grid-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 10px;
}
.head-img {
  width: 25px;
  height: 25px;
}

.chart-box {
  width: 100%; /* 调整宽度以适应不同屏幕 */
  height: 300px; /* 调整高度以适应不同屏幕 */
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
